<script setup>
import {ref} from "vue"
  import {getListAPI} from "@/apis/task.js"
import {useGet} from '@/hooks/index.js'

defineProps({
	list:{
		type:Array,
		required:true
	}
})
const {list,onScrollToLower,refresh,isTriggered,hasMore,readAll} =useGet(getListAPI,1)
const statusArr =(status)=>{
	// 这个不需要使用refstatus
	const Type={
   1: '待提货',
   2: '在途',
   3: '改派',
   4: '已交付',
   5: '已作废'
  }
 return Type[status]
}

</script>

<template>
	
	<scroll-view class="scroll-view" refresher-enabled scroll-y @scrolltolower="onScrollToLower" @refresherrefresh="refresh" :refresher-triggered="isTriggered">
		<view class="scroll-view-wrapper">
			<view class="task-card" v-for="item in list" :key="item.id">
				<navigator hover-class="none" :url="`/subpkg_task/detail/index?id=${item.id}`">
					<view class="header">
						<text class="no">任务编号: {{ item.transportTaskId }}</text>
						<text class="status">{{ statusArr(item.status) }}</text>
					</view>
					<view class="body">
						<view class="timeline">
							<view class="line">{{item.startAddress}}</view>
							<view class="line">{{item.endAddress}}</view>
						</view>
					</view>
				</navigator>
				<view class="footer">
					<view class="label">提货时间</view>
					<view class="time">{{item.planArrivalTime}}</view>
					<navigator hover-class="none" :url="`/subpkg_task/pickup/index?id=${item.id}`" class="action">提货</navigator>
				</view>
			</view>
		</view>
		
		<!-- 没有更多数据了 -->
		<view style="text-align: center; width: 100%; height: 30px" v-if="hasMore === false">没有更多数据了</view>
	</scroll-view>
</template>

<style lang="scss" scoped>
@import './styles.scss';
</style>
